<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <script src="../ExternalLibrary/js/react.js"></script>
    <script src="../ExternalLibrary/js/react-dom.js"></script>
    <script src="../ExternalLibrary/js/babel.js"></script>
    <script type="text/babel">
        class List extends React.Component{
            
            render() {
                // 注意map中不能有 "{}" 出现
                return <ul>
                    {this.props.users.map((json,index)=><ListItem key={index} user={json}></ListItem>)}
                </ul>
            }
        }

        

        class ListItem extends React.Component{
           constructor(...args){
               super(...args);

                // 监听数据的变化
               this.state={
                   color:''
               }
           }

            fn(){
                this.setState({
                    color:'red'
                })
            }

            render() {
                return <li>
                    // 如果不加bind的话,this会改变。原理待理解
                    <input type="button" value="变红" onClick = {this.fn.bind(this)}></input>
                    <h4 style={ {color:this.state.color} }>{this.props.user.name}</h4>
                    <p>{this.props.user.pass}</p>
                </li>
            }
        }

        let oDiv = document.getElementById('div1');

        ReactDOM.render(
            <List users={[
                {name:'blue',pass:'123456'},
                {name:'red',pass:'abcdefg'},
                {name:'black',pass:'hijklmn'},
                {name:'yellow',pass:'opqrstuv'},
                {name:'green',pass:'uvwxyz'},
                {name:'one',pass:'123123'}
            ]}></List>
            ,oDiv);
    </script>
</head>
<body>
    <div id = "div1">

    </div>
</body>